@theme {
  /* animations */
  --animations-spin: spin 1s linear infinite;
  --animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animations-bounce: bounce 1s infinite;

  /* aspect-ratios */
  --aspect-ratios-square: 1 / 1;
  --aspect-ratios-landscape: 4 / 3;
  --aspect-ratios-portrait: 3 / 4;
  --aspect-ratios-wide: 16 / 9;
  --aspect-ratios-ultrawide: 18 / 5;
  --aspect-ratios-golden: 1.618 / 1;

  /* blurs */
  --blurs-none:  ;
  --blurs-sm: 4px;
  --blurs-md: 8px;
  --blurs-lg: 12px;
  --blurs-xl: 16px;
  --blurs-2xl: 24px;
  --blurs-3xl: 40px;
  --blurs-4xl: 64px;

  /* borders */
  --borders-xs: 0.5px solid;
  --borders-sm: 1px solid;
  --borders-md: 2px solid;
  --borders-lg: 4px solid;
  --borders-xl: 8px solid;

  /* colors */
  --color-transparent: transparent;
  --color-current: currentColor;
  --color-black: oklch(0.05 0.03 261.692);
  --color-white: oklch(1 0 0);
  --color-white-alpha-50: oklch(1 0 0 / 0.04);
  --color-white-alpha-100: oklch(1 0 0 / 0.06);
  --color-white-alpha-200: oklch(1 0 0 / 0.08);
  --color-white-alpha-300: oklch(1 0 0 / 0.16);
  --color-white-alpha-400: oklch(1 0 0 / 0.24);
  --color-white-alpha-500: oklch(1 0 0 / 0.36);
  --color-white-alpha-600: oklch(1 0 0 / 0.48);
  --color-white-alpha-700: oklch(1 0 0 / 0.64);
  --color-white-alpha-800: oklch(1 0 0 / 0.8);
  --color-white-alpha-900: oklch(1 0 0 / 0.92);
  --color-white-alpha-950: oklch(1 0 0 / 0.95);
  --color-black-alpha-50: oklch(0 0 0 / 0.04);
  --color-black-alpha-100: oklch(0 0 0 / 0.06);
  --color-black-alpha-200: oklch(0 0 0 / 0.08);
  --color-black-alpha-300: oklch(0 0 0 / 0.16);
  --color-black-alpha-400: oklch(0 0 0 / 0.24);
  --color-black-alpha-500: oklch(0 0 0 / 0.36);
  --color-black-alpha-600: oklch(0 0 0 / 0.48);
  --color-black-alpha-700: oklch(0 0 0 / 0.64);
  --color-black-alpha-800: oklch(0 0 0 / 0.8);
  --color-black-alpha-900: oklch(0 0 0 / 0.92);
  --color-black-alpha-950: oklch(0 0 0 / 0.95);
  --color-gray-50: oklch(0.985 0.002 247.839);
  --color-gray-100: oklch(0.967 0.003 264.542);
  --color-gray-200: oklch(0.928 0.006 264.531);
  --color-gray-300: oklch(0.872 0.01 258.338);
  --color-gray-400: oklch(0.707 0.012 261.325);
  --color-gray-500: oklch(0.551 0.015 264.364);
  --color-gray-600: oklch(0.446 0.016 256.802);
  --color-gray-700: oklch(0.373 0.017 259.733);
  --color-gray-800: oklch(0.278 0.018 256.848);
  --color-gray-900: oklch(0.21 0.02 264.665);
  --color-gray-950: oklch(0.145 0.022 261.692);
  --color-zinc-50: oklch(0.985 0 0);
  --color-zinc-100: oklch(0.967 0.001 286.375);
  --color-zinc-200: oklch(0.92 0.004 286.32);
  --color-zinc-300: oklch(0.871 0.006 286.286);
  --color-zinc-400: oklch(0.705 0.015 286.067);
  --color-zinc-500: oklch(0.552 0.016 285.938);
  --color-zinc-600: oklch(0.442 0.017 285.786);
  --color-zinc-700: oklch(0.37 0.013 285.805);
  --color-zinc-800: oklch(0.274 0.006 286.033);
  --color-zinc-900: oklch(0.21 0.006 285.885);
  --color-zinc-950: oklch(0.141 0.005 285.823);
  --color-neutral-50: oklch(0.985 0 0);
  --color-neutral-100: oklch(0.97 0 0);
  --color-neutral-200: oklch(0.922 0 0);
  --color-neutral-300: oklch(0.87 0 0);
  --color-neutral-400: oklch(0.708 0 0);
  --color-neutral-500: oklch(0.556 0 0);
  --color-neutral-600: oklch(0.439 0 0);
  --color-neutral-700: oklch(0.371 0 0);
  --color-neutral-800: oklch(0.269 0 0);
  --color-neutral-900: oklch(0.205 0 0);
  --color-neutral-950: oklch(0.145 0 0);
  --color-stone-50: oklch(0.985 0.001 106.423);
  --color-stone-100: oklch(0.97 0.001 106.424);
  --color-stone-200: oklch(0.923 0.003 48.717);
  --color-stone-300: oklch(0.869 0.005 56.366);
  --color-stone-400: oklch(0.709 0.01 56.259);
  --color-stone-500: oklch(0.553 0.013 58.071);
  --color-stone-600: oklch(0.444 0.011 73.639);
  --color-stone-700: oklch(0.374 0.01 67.558);
  --color-stone-800: oklch(0.268 0.007 34.298);
  --color-stone-900: oklch(0.216 0.006 56.043);
  --color-stone-950: oklch(0.147 0.004 49.25);
  --color-red-50: oklch(0.971 0.013 17.38);
  --color-red-100: oklch(0.936 0.032 17.717);
  --color-red-200: oklch(0.885 0.062 18.334);
  --color-red-300: oklch(0.808 0.114 19.571);
  --color-red-400: oklch(0.704 0.191 22.216);
  --color-red-500: oklch(0.637 0.237 25.331);
  --color-red-600: oklch(0.577 0.245 27.325);
  --color-red-700: oklch(0.505 0.213 27.518);
  --color-red-800: oklch(0.444 0.177 26.899);
  --color-red-900: oklch(0.396 0.141 25.723);
  --color-red-950: oklch(0.258 0.092 26.042);
  --color-orange-50: oklch(0.98 0.016 73.684);
  --color-orange-100: oklch(0.954 0.038 75.164);
  --color-orange-200: oklch(0.901 0.076 70.697);
  --color-orange-300: oklch(0.837 0.128 66.29);
  --color-orange-400: oklch(0.75 0.183 55.934);
  --color-orange-500: oklch(0.705 0.213 47.604);
  --color-orange-600: oklch(0.646 0.222 41.116);
  --color-orange-700: oklch(0.553 0.195 38.402);
  --color-orange-800: oklch(0.47 0.157 37.304);
  --color-orange-900: oklch(0.408 0.123 38.172);
  --color-orange-950: oklch(0.266 0.079 36.259);
  --color-amber-50: oklch(0.987 0.022 95.277);
  --color-amber-100: oklch(0.962 0.059 95.617);
  --color-amber-200: oklch(0.924 0.12 95.746);
  --color-amber-300: oklch(0.879 0.169 91.605);
  --color-amber-400: oklch(0.828 0.189 84.429);
  --color-amber-500: oklch(0.769 0.188 70.08);
  --color-amber-600: oklch(0.666 0.179 58.318);
  --color-amber-700: oklch(0.555 0.163 48.998);
  --color-amber-800: oklch(0.473 0.137 46.201);
  --color-amber-900: oklch(0.414 0.112 45.904);
  --color-amber-950: oklch(0.279 0.077 45.635);
  --color-yellow-50: oklch(0.987 0.026 102.212);
  --color-yellow-100: oklch(0.973 0.071 103.193);
  --color-yellow-200: oklch(0.945 0.129 101.54);
  --color-yellow-300: oklch(0.897 0.182 98.111);
  --color-yellow-400: oklch(0.854 0.184 96.404);
  --color-yellow-500: oklch(0.795 0.18 86.047);
  --color-yellow-600: oklch(0.681 0.162 75.834);
  --color-yellow-700: oklch(0.554 0.135 66.442);
  --color-yellow-800: oklch(0.476 0.114 61.907);
  --color-yellow-900: oklch(0.421 0.095 57.708);
  --color-yellow-950: oklch(0.286 0.066 53.813);
  --color-lime-50: oklch(0.986 0.031 120.757);
  --color-lime-100: oklch(0.967 0.067 122.328);
  --color-lime-200: oklch(0.938 0.127 124.321);
  --color-lime-300: oklch(0.897 0.196 126.665);
  --color-lime-400: oklch(0.841 0.238 128.85);
  --color-lime-500: oklch(0.768 0.233 130.85);
  --color-lime-600: oklch(0.648 0.2 131.684);
  --color-lime-700: oklch(0.532 0.157 131.589);
  --color-lime-800: oklch(0.453 0.124 130.933);
  --color-lime-900: oklch(0.405 0.101 131.063);
  --color-lime-950: oklch(0.274 0.072 132.109);
  --color-green-50: oklch(0.982 0.018 155.826);
  --color-green-100: oklch(0.962 0.044 156.743);
  --color-green-200: oklch(0.925 0.084 155.995);
  --color-green-300: oklch(0.871 0.15 154.449);
  --color-green-400: oklch(0.792 0.209 151.711);
  --color-green-500: oklch(0.723 0.219 149.579);
  --color-green-600: oklch(0.627 0.194 149.214);
  --color-green-700: oklch(0.527 0.154 150.069);
  --color-green-800: oklch(0.448 0.119 151.328);
  --color-green-900: oklch(0.393 0.095 152.535);
  --color-green-950: oklch(0.266 0.065 152.934);
  --color-emerald-50: oklch(0.979 0.021 166.113);
  --color-emerald-100: oklch(0.95 0.052 163.051);
  --color-emerald-200: oklch(0.905 0.093 164.15);
  --color-emerald-300: oklch(0.845 0.143 164.978);
  --color-emerald-400: oklch(0.765 0.177 163.223);
  --color-emerald-500: oklch(0.696 0.17 162.48);
  --color-emerald-600: oklch(0.596 0.145 163.225);
  --color-emerald-700: oklch(0.508 0.118 165.612);
  --color-emerald-800: oklch(0.432 0.095 166.913);
  --color-emerald-900: oklch(0.378 0.077 168.94);
  --color-emerald-950: oklch(0.262 0.051 172.552);
  --color-teal-50: oklch(0.984 0.014 180.72);
  --color-teal-100: oklch(0.953 0.051 180.801);
  --color-teal-200: oklch(0.91 0.096 180.426);
  --color-teal-300: oklch(0.855 0.138 181.071);
  --color-teal-400: oklch(0.777 0.152 181.912);
  --color-teal-500: oklch(0.704 0.14 182.503);
  --color-teal-600: oklch(0.6 0.118 184.704);
  --color-teal-700: oklch(0.511 0.096 186.391);
  --color-teal-800: oklch(0.437 0.078 188.216);
  --color-teal-900: oklch(0.386 0.063 188.416);
  --color-teal-950: oklch(0.277 0.046 192.524);
  --color-cyan-50: oklch(0.984 0.019 200.873);
  --color-cyan-100: oklch(0.956 0.045 203.388);
  --color-cyan-200: oklch(0.917 0.08 205.041);
  --color-cyan-300: oklch(0.865 0.127 207.078);
  --color-cyan-400: oklch(0.789 0.154 211.53);
  --color-cyan-500: oklch(0.715 0.143 215.221);
  --color-cyan-600: oklch(0.609 0.126 221.723);
  --color-cyan-700: oklch(0.52 0.105 223.128);
  --color-cyan-800: oklch(0.45 0.085 224.283);
  --color-cyan-900: oklch(0.398 0.07 227.392);
  --color-cyan-950: oklch(0.302 0.056 229.695);
  --color-sky-50: oklch(0.977 0.013 236.62);
  --color-sky-100: oklch(0.951 0.026 236.824);
  --color-sky-200: oklch(0.901 0.058 230.902);
  --color-sky-300: oklch(0.828 0.111 230.318);
  --color-sky-400: oklch(0.746 0.16 232.661);
  --color-sky-500: oklch(0.685 0.169 237.323);
  --color-sky-600: oklch(0.588 0.158 241.966);
  --color-sky-700: oklch(0.5 0.134 242.749);
  --color-sky-800: oklch(0.443 0.11 240.79);
  --color-sky-900: oklch(0.391 0.09 240.876);
  --color-sky-950: oklch(0.293 0.066 243.157);
  --color-blue-50: oklch(0.97 0.014 254.604);
  --color-blue-100: oklch(0.932 0.032 255.585);
  --color-blue-200: oklch(0.882 0.059 254.128);
  --color-blue-300: oklch(0.809 0.105 251.813);
  --color-blue-400: oklch(0.707 0.165 254.624);
  --color-blue-500: oklch(0.623 0.214 259.815);
  --color-blue-600: oklch(0.546 0.245 262.881);
  --color-blue-700: oklch(0.488 0.243 264.376);
  --color-blue-800: oklch(0.424 0.199 265.638);
  --color-blue-900: oklch(0.379 0.146 265.522);
  --color-blue-950: oklch(0.282 0.091 267.935);
  --color-indigo-50: oklch(0.962 0.018 272.314);
  --color-indigo-100: oklch(0.93 0.034 272.788);
  --color-indigo-200: oklch(0.87 0.065 274.039);
  --color-indigo-300: oklch(0.785 0.115 274.713);
  --color-indigo-400: oklch(0.673 0.182 276.935);
  --color-indigo-500: oklch(0.585 0.233 277.117);
  --color-indigo-600: oklch(0.511 0.262 276.966);
  --color-indigo-700: oklch(0.457 0.24 277.023);
  --color-indigo-800: oklch(0.398 0.195 277.366);
  --color-indigo-900: oklch(0.359 0.144 278.697);
  --color-indigo-950: oklch(0.257 0.09 281.288);
  --color-violet-50: oklch(0.969 0.016 293.756);
  --color-violet-100: oklch(0.943 0.029 294.588);
  --color-violet-200: oklch(0.894 0.057 293.283);
  --color-violet-300: oklch(0.811 0.111 293.571);
  --color-violet-400: oklch(0.702 0.183 293.541);
  --color-violet-500: oklch(0.606 0.25 292.717);
  --color-violet-600: oklch(0.541 0.281 293.009);
  --color-violet-700: oklch(0.491 0.27 292.581);
  --color-violet-800: oklch(0.432 0.232 292.759);
  --color-violet-900: oklch(0.38 0.189 293.745);
  --color-violet-950: oklch(0.283 0.141 291.089);
  --color-purple-50: oklch(0.977 0.014 308.299);
  --color-purple-100: oklch(0.946 0.033 307.174);
  --color-purple-200: oklch(0.902 0.063 306.703);
  --color-purple-300: oklch(0.827 0.119 306.383);
  --color-purple-400: oklch(0.714 0.203 305.504);
  --color-purple-500: oklch(0.627 0.265 303.9);
  --color-purple-600: oklch(0.558 0.288 302.321);
  --color-purple-700: oklch(0.496 0.265 301.924);
  --color-purple-800: oklch(0.438 0.218 303.724);
  --color-purple-900: oklch(0.381 0.176 304.987);
  --color-purple-950: oklch(0.291 0.149 302.717);
  --color-fuchsia-50: oklch(0.977 0.017 320.058);
  --color-fuchsia-100: oklch(0.952 0.037 318.852);
  --color-fuchsia-200: oklch(0.903 0.076 319.62);
  --color-fuchsia-300: oklch(0.833 0.145 321.434);
  --color-fuchsia-400: oklch(0.74 0.238 322.16);
  --color-fuchsia-500: oklch(0.667 0.295 322.15);
  --color-fuchsia-600: oklch(0.591 0.293 322.896);
  --color-fuchsia-700: oklch(0.518 0.253 323.949);
  --color-fuchsia-800: oklch(0.452 0.211 324.591);
  --color-fuchsia-900: oklch(0.401 0.17 325.612);
  --color-fuchsia-950: oklch(0.293 0.136 325.661);
  --color-pink-50: oklch(0.971 0.014 343.198);
  --color-pink-100: oklch(0.948 0.028 342.258);
  --color-pink-200: oklch(0.899 0.061 343.231);
  --color-pink-300: oklch(0.823 0.12 346.018);
  --color-pink-400: oklch(0.718 0.202 349.761);
  --color-pink-500: oklch(0.656 0.241 354.308);
  --color-pink-600: oklch(0.592 0.249 0.584);
  --color-pink-700: oklch(0.525 0.223 3.958);
  --color-pink-800: oklch(0.459 0.187 3.815);
  --color-pink-900: oklch(0.408 0.153 2.432);
  --color-pink-950: oklch(0.284 0.109 3.907);
  --color-rose-50: oklch(0.969 0.015 12.422);
  --color-rose-100: oklch(0.941 0.03 12.58);
  --color-rose-200: oklch(0.892 0.058 10.001);
  --color-rose-300: oklch(0.81 0.117 11.638);
  --color-rose-400: oklch(0.712 0.194 13.428);
  --color-rose-500: oklch(0.645 0.246 16.439);
  --color-rose-600: oklch(0.586 0.253 17.585);
  --color-rose-700: oklch(0.514 0.222 16.935);
  --color-rose-800: oklch(0.455 0.188 13.697);
  --color-rose-900: oklch(0.41 0.159 10.272);
  --color-rose-950: oklch(0.271 0.105 12.094);

  /* cursor */
  --cursor-button: pointer;
  --cursor-checkbox: default;
  --cursor-disabled: not-allowed;
  --cursor-menuitem: default;
  --cursor-option: default;
  --cursor-radio: default;
  --cursor-slider: default;
  --cursor-swittch: pointer;

  /* durations */
  --durations-fastest: 50ms;
  --durations-faster: 100ms;
  --durations-fast: 150ms;
  --durations-moderate: 200ms;
  --durations-slow: 300ms;
  --durations-slower: 400ms;
  --durations-slowest: 500ms;

  /* easings */
  --easings-ease-in: cubic-bezier(0.42, 0, 1, 1);
  --easings-ease-out: cubic-bezier(0, 0, 0.58, 1);
  --easings-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --easings-ease-in-smooth: cubic-bezier(0.32, 0.72, 0, 1);
  --easings-bounce-in: cubic-bezier(0.34, 1.24, 0.64, 1);
  --easings-bounce-out: cubic-bezier(0.34, 1.16, 0.64, 1);

  /* font-sizes */
  --font-sizes-2xs: calc(0.675rem * var(--scale-factor));
  --font-sizes-xs: calc(0.75rem * var(--scale-factor));
  --font-sizes-sm: calc(0.8125rem * var(--scale-factor));
  --font-sizes-md: calc(0.875rem * var(--scale-factor));
  --font-sizes-lg: calc(1rem * var(--scale-factor));
  --font-sizes-xl: calc(1.125rem * var(--scale-factor));
  --font-sizes-2xl: calc(1.25rem * var(--scale-factor));
  --font-sizes-3xl: calc(1.5rem * var(--scale-factor));
  --font-sizes-4xl: calc(1.875rem * var(--scale-factor));
  --font-sizes-5xl: calc(2.25rem * var(--scale-factor));
  --font-sizes-6xl: calc(3rem * var(--scale-factor));
  --font-sizes-7xl: calc(3.75rem * var(--scale-factor));
  --font-sizes-8xl: calc(4.5rem * var(--scale-factor));
  --font-sizes-9xl: calc(6rem * var(--scale-factor));

  /* font-weights */
  --font-weights-thin: 100;
  --font-weights-extralight: 200;
  --font-weights-light: 300;
  --font-weights-normal: 400;
  --font-weights-medium: 500;
  --font-weights-semibold: 600;
  --font-weights-bold: 700;
  --font-weights-extrabold: 800;
  --font-weights-black: 900;

  /* fonts */
  --fonts-heading:
    Inter Variable, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --fonts-body:
    Inter Variable, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --fonts-mono:
    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;

  /* letter-spacings */
  --letter-spacings-tightest: -0.05em;
  --letter-spacings-tighter: -0.025em;
  --letter-spacings-tight: -0.0125em;
  --letter-spacings-normal: 0;
  --letter-spacings-wide: 0.0125em;
  --letter-spacings-wider: 0.025em;
  --letter-spacings-widest: 0.05em;
  --letter-spacings-heading_xs: 0.0025em;
  --letter-spacings-heading_sm: 0;
  --letter-spacings-heading_md: 0;
  --letter-spacings-heading_lg: -0.0025em;
  --letter-spacings-heading_xl: -0.005;
  --letter-spacings-heading_2xl: -0.00625em;
  --letter-spacings-heading_3xl: -0.0075em;
  --letter-spacings-heading_4xl: -0.01em;
  --letter-spacings-heading_5xl: -0.025em;
  --letter-spacings-heading_6xl: -0.03em;
  --letter-spacings-heading_7xl: -0.035em;

  /* line-heights */
  --line-heights-2xs: calc(0.845rem * var(--scale-factor));
  --line-heights-xs: calc(1rem * var(--scale-factor));
  --line-heights-sm: calc(1.1375rem * var(--scale-factor));
  --line-heights-md: calc(1.26rem * var(--scale-factor));
  --line-heights-lg: calc(1.5rem * var(--scale-factor));
  --line-heights-xl: calc(1.62rem * var(--scale-factor));
  --line-heights-2xl: calc(1.75rem * var(--scale-factor));
  --line-heights-3xl: calc(1.95rem * var(--scale-factor));
  --line-heights-4xl: calc(2.345rem * var(--scale-factor));
  --line-heights-5xl: calc(2.7rem * var(--scale-factor));
  --line-heights-6xl: calc(3.45rem * var(--scale-factor));
  --line-heights-7xl: calc(4.125rem * var(--scale-factor));
  --line-heights-8xl: calc(4.5rem * var(--scale-factor));
  --line-heights-9xl: calc(6rem * var(--scale-factor));
  --line-heights-heading_xs: calc(0.95rem * var(--scale-factor));
  --line-heights-heading_sm: calc(1rem * var(--scale-factor));
  --line-heights-heading_md: calc(1.2rem * var(--scale-factor));
  --line-heights-heading_lg: calc(1.33rem * var(--scale-factor));
  --line-heights-heading_xl: calc(1.46rem * var(--scale-factor));
  --line-heights-heading_2xl: calc(1.55rem * var(--scale-factor));
  --line-heights-heading_3xl: calc(1.8rem * var(--scale-factor));
  --line-heights-heading_4xl: calc(2.15rem * var(--scale-factor));
  --line-heights-heading_5xl: calc(2.475rem * var(--scale-factor));
  --line-heights-heading_6xl: calc(3rem * var(--scale-factor));
  --line-heights-heading_7xl: calc(3.75rem * var(--scale-factor));

  /* radii */
  --radius-2xs: 0.15rem;
  --radius-xs: 0.2rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  --radius-full: 9999px;

  /* sizes */
  --sizes-1: calc(0.25rem * var(--scale-factor));
  --sizes-2: calc(0.5rem * var(--scale-factor));
  --sizes-3: calc(0.75rem * var(--scale-factor));
  --sizes-4: calc(1rem * var(--scale-factor));
  --sizes-5: calc(1.25rem * var(--scale-factor));
  --sizes-6: calc(1.5rem * var(--scale-factor));
  --sizes-7: calc(1.75rem * var(--scale-factor));
  --sizes-8: calc(2rem * var(--scale-factor));
  --sizes-9: calc(2.25rem * var(--scale-factor));
  --sizes-10: calc(2.5rem * var(--scale-factor));
  --sizes-12: calc(3rem * var(--scale-factor));
  --sizes-14: calc(3.5rem * var(--scale-factor));
  --sizes-16: calc(4rem * var(--scale-factor));
  --sizes-20: calc(5rem * var(--scale-factor));
  --sizes-24: calc(6rem * var(--scale-factor));
  --sizes-28: calc(7rem * var(--scale-factor));
  --sizes-32: calc(8rem * var(--scale-factor));
  --sizes-36: calc(9rem * var(--scale-factor));
  --sizes-40: calc(10rem * var(--scale-factor));
  --sizes-44: calc(11rem * var(--scale-factor));
  --sizes-48: calc(12rem * var(--scale-factor));
  --sizes-52: calc(13rem * var(--scale-factor));
  --sizes-56: calc(14rem * var(--scale-factor));
  --sizes-60: calc(15rem * var(--scale-factor));
  --sizes-64: calc(16rem * var(--scale-factor));
  --sizes-72: calc(18rem * var(--scale-factor));
  --sizes-80: calc(20rem * var(--scale-factor));
  --sizes-96: calc(24rem * var(--scale-factor));
  --sizes-3xs: 14rem;
  --sizes-2xs: 16rem;
  --sizes-xs: 20rem;
  --sizes-sm: 24rem;
  --sizes-md: 28rem;
  --sizes-lg: 32rem;
  --sizes-xl: 36rem;
  --sizes-2xl: 42rem;
  --sizes-3xl: 48rem;
  --sizes-4xl: 56rem;
  --sizes-5xl: 64rem;
  --sizes-6xl: 72rem;
  --sizes-7xl: 80rem;
  --sizes-8xl: 90rem;
  --sizes-0_5: calc(0.125rem * var(--scale-factor));
  --sizes-1_5: calc(0.375rem * var(--scale-factor));
  --sizes-2_5: calc(0.625rem * var(--scale-factor));
  --sizes-3_5: calc(0.875rem * var(--scale-factor));
  --sizes-4_5: calc(1.125rem * var(--scale-factor));
  --sizes-1/2: 50%;
  --sizes-1/3: 33.333333%;
  --sizes-2/3: 66.666667%;
  --sizes-1/4: 25%;
  --sizes-3/4: 75%;
  --sizes-1/5: 20%;
  --sizes-2/5: 40%;
  --sizes-3/5: 60%;
  --sizes-4/5: 80%;
  --sizes-1/6: 16.666667%;
  --sizes-2/6: 33.333333%;
  --sizes-3/6: 50%;
  --sizes-4/6: 66.666667%;
  --sizes-5/6: 83.333333%;
  --sizes-1/12: 8.333333%;
  --sizes-2/12: 16.666667%;
  --sizes-3/12: 25%;
  --sizes-4/12: 33.333333%;
  --sizes-5/12: 41.666667%;
  --sizes-6/12: 50%;
  --sizes-7/12: 58.333333%;
  --sizes-8/12: 66.666667%;
  --sizes-9/12: 75%;
  --sizes-10/12: 83.333333%;
  --sizes-11/12: 91.666667%;
  --sizes-max: max-content;
  --sizes-min: min-content;
  --sizes-fit: fit-content;
  --sizes-prose: 60ch;
  --sizes-full: 100%;
  --sizes-dvh: 100dvh;
  --sizes-svh: 100svh;
  --sizes-lvh: 100lvh;
  --sizes-dvw: 100dvw;
  --sizes-svw: 100svw;
  --sizes-lvw: 100lvw;
  --sizes-vw: 100vw;
  --sizes-vh: 100vh;

  /* spacing */
  --spacing-1: calc(0.25rem * var(--scale-factor));
  --spacing-2: calc(0.5rem * var(--scale-factor));
  --spacing-3: calc(0.75rem * var(--scale-factor));
  --spacing-4: calc(1rem * var(--scale-factor));
  --spacing-5: calc(1.25rem * var(--scale-factor));
  --spacing-6: calc(1.5rem * var(--scale-factor));
  --spacing-7: calc(1.75rem * var(--scale-factor));
  --spacing-8: calc(2rem * var(--scale-factor));
  --spacing-9: calc(2.25rem * var(--scale-factor));
  --spacing-10: calc(2.5rem * var(--scale-factor));
  --spacing-12: calc(3rem * var(--scale-factor));
  --spacing-14: calc(3.5rem * var(--scale-factor));
  --spacing-16: calc(4rem * var(--scale-factor));
  --spacing-20: calc(5rem * var(--scale-factor));
  --spacing-24: calc(6rem * var(--scale-factor));
  --spacing-28: calc(7rem * var(--scale-factor));
  --spacing-32: calc(8rem * var(--scale-factor));
  --spacing-36: calc(9rem * var(--scale-factor));
  --spacing-40: calc(10rem * var(--scale-factor));
  --spacing-44: calc(11rem * var(--scale-factor));
  --spacing-48: calc(12rem * var(--scale-factor));
  --spacing-52: calc(13rem * var(--scale-factor));
  --spacing-56: calc(14rem * var(--scale-factor));
  --spacing-60: calc(15rem * var(--scale-factor));
  --spacing-64: calc(16rem * var(--scale-factor));
  --spacing-72: calc(18rem * var(--scale-factor));
  --spacing-80: calc(20rem * var(--scale-factor));
  --spacing-96: calc(24rem * var(--scale-factor));
  --spacing-0_5: calc(0.125rem * var(--scale-factor));
  --spacing-1_5: calc(0.375rem * var(--scale-factor));
  --spacing-2_5: calc(0.625rem * var(--scale-factor));
  --spacing-3_5: calc(0.875rem * var(--scale-factor));
  --spacing-4_5: calc(1.125rem * var(--scale-factor));

  /* z-indices */
  --z-indices-layer-1: 1;
  --z-indices-layer-2: 10;
  --z-indices-layer-3: 100;
  --z-indices-layer-4: 1000;
  --z-indices-hide: -1;
  --z-indices-base: 0;
  --z-indices-docked: 10;
  --z-indices-dropdown: 1000;
  --z-indices-sticky: 1100;
  --z-indices-banner: 1200;
  --z-indices-overlay: 1300;
  --z-indices-modal: 1400;
  --z-indices-popover: 1500;
  --z-indices-skip-nav: 1600;
  --z-indices-toast: 1700;
  --z-indices-tooltip: 1800;
  --z-indices-max: 2147483647;

  --color-presence-online: var(--colors-presence-online);
  --color-presence-offline: var(--colors-presence-offline);
  --color-presence-busy: var(--colors-presence-busy);
  --color-presence-dnd: var(--colors-presence-dnd);
  --color-presence-away: var(--colors-presence-away);
  --color-status-success: var(--colors-status-success);
  --color-status-error: var(--colors-status-error);
  --color-status-warning: var(--colors-status-warning);
  --color-status-info: var(--colors-status-info);
  --color-sidebar-bg: var(--colors-sidebar-bg);
  --color-sidebar-fg: var(--colors-sidebar-fg);
  --color-sidebar-border: var(--colors-sidebar-border);
  --color-sidebar-accent-bg: var(--colors-sidebar-accent-bg);
  --color-sidebar-accent-fg: var(--colors-sidebar-accent-fg);
  --color-bg-default: var(--colors-bg-default);
  --color-bg-muted: var(--colors-bg-muted);
  --color-bg-subtle: var(--colors-bg-subtle);
  --color-bg-emphasized: var(--colors-bg-emphasized);
  --color-bg-inverted: var(--colors-bg-inverted);
  --color-bg-content: var(--colors-bg-content);
  --color-bg-panel: var(--colors-bg-panel);
  --color-bg-overlay: var(--colors-bg-overlay);
  --color-bg-backdrop: var(--colors-bg-backdrop);
  --color-bg-error: var(--colors-bg-error);
  --color-bg-warning: var(--colors-bg-warning);
  --color-bg-success: var(--colors-bg-success);
  --color-bg-info: var(--colors-bg-info);
  --color-fg-default: var(--colors-fg-default);
  --color-fg-muted: var(--colors-fg-muted);
  --color-fg-subtle: var(--colors-fg-subtle);
  --color-fg-emphasized: var(--colors-fg-emphasized);
  --color-fg-inverted: var(--colors-fg-inverted);
  --color-fg-error: var(--colors-fg-error);
  --color-fg-warning: var(--colors-fg-warning);
  --color-fg-success: var(--colors-fg-success);
  --color-fg-info: var(--colors-fg-info);
  --color-border-default: var(--colors-border-default);
  --color-border-muted: var(--colors-border-muted);
  --color-border-subtle: var(--colors-border-subtle);
  --color-border-emphasized: var(--colors-border-emphasized);
  --color-border-inverted: var(--colors-border-inverted);
  --color-border-error: var(--colors-border-error);
  --color-border-warning: var(--colors-border-warning);
  --color-border-success: var(--colors-border-success);
  --color-border-info: var(--colors-border-info);
  --color-accent-contrast: var(--colors-accent-contrast);
  --color-accent-fg: var(--colors-accent-fg);
  --color-accent-muted: var(--colors-accent-muted);
  --color-accent-subtle: var(--colors-accent-subtle);
  --color-accent-emphasized: var(--colors-accent-emphasized);
  --color-accent-solid: var(--colors-accent-solid);
  --color-accent-focus-ring: var(--colors-accent-focus-ring);
  --color-neutral-contrast: var(--colors-neutral-contrast);
  --color-neutral-fg: var(--colors-neutral-fg);
  --color-neutral-muted: var(--colors-neutral-muted);
  --color-neutral-subtle: var(--colors-neutral-subtle);
  --color-neutral-emphasized: var(--colors-neutral-emphasized);
  --color-neutral-solid: var(--colors-neutral-solid);
  --color-neutral-focus-ring: var(--colors-neutral-focus-ring);
  --color-slate-contrast: var(--colors-slate-contrast);
  --color-slate-fg: var(--colors-slate-fg);
  --color-slate-muted: var(--colors-slate-muted);
  --color-slate-subtle: var(--colors-slate-subtle);
  --color-slate-emphasized: var(--colors-slate-emphasized);
  --color-slate-solid: var(--colors-slate-solid);
  --color-slate-focus-ring: var(--colors-slate-focus-ring);
  --color-gray-contrast: var(--colors-gray-contrast);
  --color-gray-fg: var(--colors-gray-fg);
  --color-gray-muted: var(--colors-gray-muted);
  --color-gray-subtle: var(--colors-gray-subtle);
  --color-gray-emphasized: var(--colors-gray-emphasized);
  --color-gray-solid: var(--colors-gray-solid);
  --color-gray-focus-ring: var(--colors-gray-focus-ring);
  --color-zinc-contrast: var(--colors-zinc-contrast);
  --color-zinc-fg: var(--colors-zinc-fg);
  --color-zinc-muted: var(--colors-zinc-muted);
  --color-zinc-subtle: var(--colors-zinc-subtle);
  --color-zinc-emphasized: var(--colors-zinc-emphasized);
  --color-zinc-solid: var(--colors-zinc-solid);
  --color-zinc-focus-ring: var(--colors-zinc-focus-ring);
  --color-stone-contrast: var(--colors-stone-contrast);
  --color-stone-fg: var(--colors-stone-fg);
  --color-stone-muted: var(--colors-stone-muted);
  --color-stone-subtle: var(--colors-stone-subtle);
  --color-stone-emphasized: var(--colors-stone-emphasized);
  --color-stone-solid: var(--colors-stone-solid);
  --color-stone-focus-ring: var(--colors-stone-focus-ring);
  --color-red-contrast: var(--colors-red-contrast);
  --color-red-fg: var(--colors-red-fg);
  --color-red-muted: var(--colors-red-muted);
  --color-red-subtle: var(--colors-red-subtle);
  --color-red-emphasized: var(--colors-red-emphasized);
  --color-red-solid: var(--colors-red-solid);
  --color-red-focus-ring: var(--colors-red-focus-ring);
  --color-orange-contrast: var(--colors-orange-contrast);
  --color-orange-fg: var(--colors-orange-fg);
  --color-orange-muted: var(--colors-orange-muted);
  --color-orange-subtle: var(--colors-orange-subtle);
  --color-orange-emphasized: var(--colors-orange-emphasized);
  --color-orange-solid: var(--colors-orange-solid);
  --color-orange-focus-ring: var(--colors-orange-focus-ring);
  --color-amber-contrast: var(--colors-amber-contrast);
  --color-amber-fg: var(--colors-amber-fg);
  --color-amber-muted: var(--colors-amber-muted);
  --color-amber-subtle: var(--colors-amber-subtle);
  --color-amber-emphasized: var(--colors-amber-emphasized);
  --color-amber-solid: var(--colors-amber-solid);
  --color-amber-focus-ring: var(--colors-amber-focus-ring);
  --color-yellow-contrast: var(--colors-yellow-contrast);
  --color-yellow-fg: var(--colors-yellow-fg);
  --color-yellow-muted: var(--colors-yellow-muted);
  --color-yellow-subtle: var(--colors-yellow-subtle);
  --color-yellow-emphasized: var(--colors-yellow-emphasized);
  --color-yellow-solid: var(--colors-yellow-solid);
  --color-yellow-focus-ring: var(--colors-yellow-focus-ring);
  --color-lime-contrast: var(--colors-lime-contrast);
  --color-lime-fg: var(--colors-lime-fg);
  --color-lime-muted: var(--colors-lime-muted);
  --color-lime-subtle: var(--colors-lime-subtle);
  --color-lime-emphasized: var(--colors-lime-emphasized);
  --color-lime-solid: var(--colors-lime-solid);
  --color-lime-focus-ring: var(--colors-lime-focus-ring);
  --color-green-contrast: var(--colors-green-contrast);
  --color-green-fg: var(--colors-green-fg);
  --color-green-muted: var(--colors-green-muted);
  --color-green-subtle: var(--colors-green-subtle);
  --color-green-emphasized: var(--colors-green-emphasized);
  --color-green-solid: var(--colors-green-solid);
  --color-green-focus-ring: var(--colors-green-focus-ring);
  --color-emerald-contrast: var(--colors-emerald-contrast);
  --color-emerald-fg: var(--colors-emerald-fg);
  --color-emerald-muted: var(--colors-emerald-muted);
  --color-emerald-subtle: var(--colors-emerald-subtle);
  --color-emerald-emphasized: var(--colors-emerald-emphasized);
  --color-emerald-solid: var(--colors-emerald-solid);
  --color-emerald-focus-ring: var(--colors-emerald-focus-ring);
  --color-teal-contrast: var(--colors-teal-contrast);
  --color-teal-fg: var(--colors-teal-fg);
  --color-teal-muted: var(--colors-teal-muted);
  --color-teal-subtle: var(--colors-teal-subtle);
  --color-teal-emphasized: var(--colors-teal-emphasized);
  --color-teal-solid: var(--colors-teal-solid);
  --color-teal-focus-ring: var(--colors-teal-focus-ring);
  --color-cyan-contrast: var(--colors-cyan-contrast);
  --color-cyan-fg: var(--colors-cyan-fg);
  --color-cyan-muted: var(--colors-cyan-muted);
  --color-cyan-subtle: var(--colors-cyan-subtle);
  --color-cyan-emphasized: var(--colors-cyan-emphasized);
  --color-cyan-solid: var(--colors-cyan-solid);
  --color-cyan-focus-ring: var(--colors-cyan-focus-ring);
  --color-sky-contrast: var(--colors-sky-contrast);
  --color-sky-fg: var(--colors-sky-fg);
  --color-sky-muted: var(--colors-sky-muted);
  --color-sky-subtle: var(--colors-sky-subtle);
  --color-sky-emphasized: var(--colors-sky-emphasized);
  --color-sky-solid: var(--colors-sky-solid);
  --color-sky-focus-ring: var(--colors-sky-focus-ring);
  --color-blue-contrast: var(--colors-blue-contrast);
  --color-blue-fg: var(--colors-blue-fg);
  --color-blue-muted: var(--colors-blue-muted);
  --color-blue-subtle: var(--colors-blue-subtle);
  --color-blue-emphasized: var(--colors-blue-emphasized);
  --color-blue-solid: var(--colors-blue-solid);
  --color-blue-focus-ring: var(--colors-blue-focus-ring);
  --color-indigo-contrast: var(--colors-indigo-contrast);
  --color-indigo-fg: var(--colors-indigo-fg);
  --color-indigo-muted: var(--colors-indigo-muted);
  --color-indigo-subtle: var(--colors-indigo-subtle);
  --color-indigo-emphasized: var(--colors-indigo-emphasized);
  --color-indigo-solid: var(--colors-indigo-solid);
  --color-indigo-focus-ring: var(--colors-indigo-focus-ring);
  --color-violet-contrast: var(--colors-violet-contrast);
  --color-violet-fg: var(--colors-violet-fg);
  --color-violet-muted: var(--colors-violet-muted);
  --color-violet-subtle: var(--colors-violet-subtle);
  --color-violet-emphasized: var(--colors-violet-emphasized);
  --color-violet-solid: var(--colors-violet-solid);
  --color-violet-focus-ring: var(--colors-violet-focus-ring);
  --color-purple-contrast: var(--colors-purple-contrast);
  --color-purple-fg: var(--colors-purple-fg);
  --color-purple-muted: var(--colors-purple-muted);
  --color-purple-subtle: var(--colors-purple-subtle);
  --color-purple-emphasized: var(--colors-purple-emphasized);
  --color-purple-solid: var(--colors-purple-solid);
  --color-purple-focus-ring: var(--colors-purple-focus-ring);
  --color-fuchsia-contrast: var(--colors-fuchsia-contrast);
  --color-fuchsia-fg: var(--colors-fuchsia-fg);
  --color-fuchsia-muted: var(--colors-fuchsia-muted);
  --color-fuchsia-subtle: var(--colors-fuchsia-subtle);
  --color-fuchsia-emphasized: var(--colors-fuchsia-emphasized);
  --color-fuchsia-solid: var(--colors-fuchsia-solid);
  --color-fuchsia-focus-ring: var(--colors-fuchsia-focus-ring);
  --color-pink-contrast: var(--colors-pink-contrast);
  --color-pink-fg: var(--colors-pink-fg);
  --color-pink-muted: var(--colors-pink-muted);
  --color-pink-subtle: var(--colors-pink-subtle);
  --color-pink-emphasized: var(--colors-pink-emphasized);
  --color-pink-solid: var(--colors-pink-solid);
  --color-pink-focus-ring: var(--colors-pink-focus-ring);
  --color-rose-contrast: var(--colors-rose-contrast);
  --color-rose-fg: var(--colors-rose-fg);
  --color-rose-muted: var(--colors-rose-muted);
  --color-rose-subtle: var(--colors-rose-subtle);
  --color-rose-emphasized: var(--colors-rose-emphasized);
  --color-rose-solid: var(--colors-rose-solid);
  --color-rose-focus-ring: var(--colors-rose-focus-ring);
  --radius-l1: var(--radii-l1);
  --radius-l2: var(--radii-l2);
  --radius-l3: var(--radii-l3);
  --radius-control-sm: var(--radii-control-sm);
  --radius-control-md: var(--radii-control-md);
  --radius-control-lg: var(--radii-control-lg);
  --radius-panel-sm: var(--radii-panel-sm);
  --radius-panel-md: var(--radii-panel-md);
  --radius-panel-lg: var(--radii-panel-lg);
  --radius-indicator-sm: var(--radii-indicator-sm);
  --radius-indicator-md: var(--radii-indicator-md);
  --radius-indicator-lg: var(--radii-indicator-lg);
  --shadow-xs: var(--shadows-xs);
  --shadow-sm: var(--shadows-sm);
  --shadow-md: var(--shadows-md);
  --shadow-lg: var(--shadows-lg);
  --shadow-xl: var(--shadows-xl);
  --shadow-2xl: var(--shadows-2xl);
  --shadow-inner: var(--shadows-inner);
  --shadow-inset: var(--shadows-inset);
  --shadow-overlay: var(--shadows-overlay);
}

:root {
  /* semantic colors */
  --colors-presence-online: light-dark(
    var(--color-green-500),
    var(--color-green-500)
  );
  --colors-presence-offline: light-dark(
    var(--color-gray-400),
    var(--color-gray-400)
  );
  --colors-presence-busy: light-dark(
    var(--color-orange-500),
    var(--color-orange-500)
  );
  --colors-presence-dnd: light-dark(var(--color-red-500), var(--color-red-500));
  --colors-presence-away: light-dark(
    var(--color-gray-400),
    var(--color-gray-400)
  );
  --colors-status-success: light-dark(
    var(--color-green-500),
    var(--color-green-500)
  );
  --colors-status-error: light-dark(var(--color-red-500), var(--color-red-500));
  --colors-status-warning: light-dark(
    var(--color-orange-500),
    var(--color-orange-500)
  );
  --colors-status-info: light-dark(
    var(--color-blue-500),
    var(--color-blue-500)
  );
  --colors-sidebar-bg: light-dark(var(--color-gray-100), var(--color-black));
  --colors-sidebar-fg: light-dark(var(--color-gray-900), var(--color-gray-100));
  --colors-sidebar-border: light-dark(
    var(--color-gray-200),
    var(--color-gray-800)
  );
  --colors-sidebar-accent-bg: light-dark(
    rgb(from var(--color-gray-200) r g b / 80%),
    var(--color-gray-900)
  );
  --colors-sidebar-accent-fg: light-dark(
    var(--color-gray-900),
    var(--color-gray-200)
  );
  --colors-bg-default: light-dark(var(--color-white), var(--color-black));
  --colors-bg-muted: light-dark(var(--color-gray-50), var(--color-gray-950));
  --colors-bg-subtle: light-dark(var(--color-gray-100), var(--color-gray-900));
  --colors-bg-emphasized: light-dark(
    var(--color-gray-200),
    var(--color-gray-800)
  );
  --colors-bg-inverted: light-dark(var(--color-black), var(--color-white));
  --colors-bg-content: light-dark(var(--color-gray-50), var(--color-gray-950));
  --colors-bg-panel: light-dark(var(--color-white), var(--color-gray-900));
  --colors-bg-overlay: light-dark(
    color-mix(
      in oklch,
      var(--color-white) var(--overlay-translucency, 95%),
      transparent
    ),
    color-mix(
      in oklch,
      var(--color-gray-900) var(--overlay-translucency, 85%),
      transparent
    )
  );
  --colors-bg-backdrop: light-dark(
    rgb(from var(--color-black) r g b / 30%),
    rgb(from var(--color-black) r g b / 30%)
  );
  --colors-bg-error: light-dark(var(--color-red-50), var(--color-red-950));
  --colors-bg-warning: light-dark(
    var(--color-orange-50),
    var(--color-orange-950)
  );
  --colors-bg-success: light-dark(
    var(--color-green-50),
    var(--color-green-950)
  );
  --colors-bg-info: light-dark(var(--color-blue-50), var(--color-blue-950));
  --colors-fg-default: light-dark(var(--color-black), var(--color-gray-50));
  --colors-fg-muted: light-dark(var(--color-gray-500), var(--color-gray-500));
  --colors-fg-subtle: light-dark(var(--color-gray-600), var(--color-gray-400));
  --colors-fg-emphasized: light-dark(
    var(--color-gray-800),
    var(--color-gray-200)
  );
  --colors-fg-inverted: light-dark(var(--color-gray-50), var(--color-black));
  --colors-fg-error: light-dark(var(--color-red-500), var(--color-red-400));
  --colors-fg-warning: light-dark(
    var(--color-orange-600),
    var(--color-orange-300)
  );
  --colors-fg-success: light-dark(
    var(--color-green-600),
    var(--color-green-300)
  );
  --colors-fg-info: light-dark(var(--color-blue-600), var(--color-blue-300));
  --colors-border-default: light-dark(
    var(--color-gray-200),
    var(--color-gray-800)
  );
  --colors-border-muted: light-dark(
    var(--color-gray-50),
    var(--color-gray-950)
  );
  --colors-border-subtle: light-dark(
    var(--color-gray-100),
    var(--color-gray-900)
  );
  --colors-border-emphasized: light-dark(
    var(--color-gray-300),
    var(--color-gray-700)
  );
  --colors-border-inverted: light-dark(
    var(--color-gray-800),
    var(--color-gray-200)
  );
  --colors-border-error: light-dark(var(--color-red-500), var(--color-red-400));
  --colors-border-warning: light-dark(
    var(--color-orange-500),
    var(--color-orange-400)
  );
  --colors-border-success: light-dark(
    var(--color-green-500),
    var(--color-green-400)
  );
  --colors-border-info: light-dark(
    var(--color-blue-500),
    var(--color-blue-400)
  );
  --colors-accent-contrast: light-dark(white, white);
  --colors-accent-fg: light-dark(
    var(--color-indigo-700),
    var(--color-indigo-300)
  );
  --colors-accent-muted: light-dark(
    var(--color-indigo-50),
    var(--color-indigo-950)
  );
  --colors-accent-subtle: light-dark(
    var(--color-indigo-100),
    var(--color-indigo-900)
  );
  --colors-accent-emphasized: light-dark(
    var(--color-indigo-200),
    var(--color-indigo-800)
  );
  --colors-accent-solid: light-dark(
    var(--color-indigo-600),
    var(--color-indigo-600)
  );
  --colors-accent-focus-ring: light-dark(
    var(--color-indigo-600),
    var(--color-indigo-600)
  );
  --colors-neutral-contrast: light-dark(var(--color-white), var(--color-black));
  --colors-neutral-fg: light-dark(var(--color-gray-800), var(--color-gray-200));
  --colors-neutral-muted: light-dark(
    var(--color-gray-100),
    var(--color-gray-900)
  );
  --colors-neutral-subtle: light-dark(
    var(--color-gray-200),
    var(--color-gray-800)
  );
  --colors-neutral-emphasized: light-dark(
    var(--color-gray-300),
    var(--color-gray-700)
  );
  --colors-neutral-solid: light-dark(var(--color-gray-900), var(--color-white));
  --colors-neutral-focus-ring: light-dark(
    var(--color-gray-600),
    var(--color-gray-600)
  );
  --colors-slate-contrast: light-dark(white, white);
  --colors-slate-fg: light-dark(var(--color-slate-900), var(--color-slate-200));
  --colors-slate-muted: light-dark(
    var(--color-slate-100),
    var(--color-slate-900)
  );
  --colors-slate-subtle: light-dark(
    var(--color-slate-200),
    var(--color-slate-800)
  );
  --colors-slate-emphasized: light-dark(
    var(--color-slate-300),
    var(--color-slate-700)
  );
  --colors-slate-solid: light-dark(
    var(--color-slate-500),
    var(--color-slate-500)
  );
  --colors-slate-focus-ring: light-dark(
    var(--color-slate-600),
    var(--color-slate-600)
  );
  --colors-gray-contrast: light-dark(white, white);
  --colors-gray-fg: light-dark(var(--color-gray-900), var(--color-gray-200));
  --colors-gray-muted: light-dark(var(--color-gray-50), var(--color-gray-950));
  --colors-gray-subtle: light-dark(
    var(--color-gray-100),
    var(--color-gray-900)
  );
  --colors-gray-emphasized: light-dark(
    var(--color-gray-300),
    var(--color-gray-700)
  );
  --colors-gray-solid: light-dark(var(--color-gray-500), var(--color-gray-500));
  --colors-gray-focus-ring: light-dark(
    var(--color-gray-600),
    var(--color-gray-600)
  );
  --colors-zinc-contrast: light-dark(white, white);
  --colors-zinc-fg: light-dark(var(--color-zinc-900), var(--color-zinc-200));
  --colors-zinc-muted: light-dark(var(--color-zinc-50), var(--color-zinc-950));
  --colors-zinc-subtle: light-dark(
    var(--color-zinc-100),
    var(--color-zinc-900)
  );
  --colors-zinc-emphasized: light-dark(
    var(--color-zinc-300),
    var(--color-zinc-700)
  );
  --colors-zinc-solid: light-dark(var(--color-zinc-500), var(--color-zinc-500));
  --colors-zinc-focus-ring: light-dark(
    var(--color-zinc-600),
    var(--color-zinc-600)
  );
  --colors-stone-contrast: light-dark(white, white);
  --colors-stone-fg: light-dark(var(--color-stone-900), var(--color-stone-200));
  --colors-stone-muted: light-dark(
    var(--color-stone-50),
    var(--color-stone-950)
  );
  --colors-stone-subtle: light-dark(
    var(--color-stone-100),
    var(--color-stone-900)
  );
  --colors-stone-emphasized: light-dark(
    var(--color-stone-300),
    var(--color-stone-700)
  );
  --colors-stone-solid: light-dark(
    var(--color-stone-500),
    var(--color-stone-500)
  );
  --colors-stone-focus-ring: light-dark(
    var(--color-stone-600),
    var(--color-stone-600)
  );
  --colors-red-contrast: light-dark(white, white);
  --colors-red-fg: light-dark(var(--color-red-700), var(--color-red-300));
  --colors-red-muted: light-dark(var(--color-red-50), var(--color-red-950));
  --colors-red-subtle: light-dark(var(--color-red-100), var(--color-red-900));
  --colors-red-emphasized: light-dark(
    var(--color-red-200),
    var(--color-red-800)
  );
  --colors-red-solid: light-dark(var(--color-red-600), var(--color-red-600));
  --colors-red-focus-ring: light-dark(
    var(--color-red-600),
    var(--color-red-600)
  );
  --colors-orange-contrast: light-dark(white, black);
  --colors-orange-fg: light-dark(
    var(--color-orange-700),
    var(--color-orange-300)
  );
  --colors-orange-muted: light-dark(
    var(--color-orange-50),
    var(--color-orange-950)
  );
  --colors-orange-subtle: light-dark(
    var(--color-orange-100),
    var(--color-orange-900)
  );
  --colors-orange-emphasized: light-dark(
    var(--color-orange-200),
    var(--color-orange-800)
  );
  --colors-orange-solid: light-dark(
    var(--color-orange-600),
    var(--color-orange-600)
  );
  --colors-orange-focus-ring: light-dark(
    var(--color-orange-600),
    var(--color-orange-600)
  );
  --colors-amber-contrast: light-dark(black, black);
  --colors-amber-fg: light-dark(var(--color-amber-700), var(--color-amber-300));
  --colors-amber-muted: light-dark(
    var(--color-amber-50),
    var(--color-amber-950)
  );
  --colors-amber-subtle: light-dark(
    var(--color-amber-100),
    var(--color-amber-900)
  );
  --colors-amber-emphasized: light-dark(
    var(--color-amber-200),
    var(--color-amber-800)
  );
  --colors-amber-solid: light-dark(
    var(--color-amber-400),
    var(--color-amber-400)
  );
  --colors-amber-focus-ring: light-dark(
    var(--color-amber-400),
    var(--color-amber-400)
  );
  --colors-yellow-contrast: light-dark(black, black);
  --colors-yellow-fg: light-dark(
    var(--color-yellow-700),
    var(--color-yellow-300)
  );
  --colors-yellow-muted: light-dark(
    var(--color-yellow-50),
    var(--color-yellow-950)
  );
  --colors-yellow-subtle: light-dark(
    var(--color-yellow-100),
    var(--color-yellow-900)
  );
  --colors-yellow-emphasized: light-dark(
    var(--color-yellow-200),
    var(--color-yellow-800)
  );
  --colors-yellow-solid: light-dark(
    var(--color-yellow-400),
    var(--color-yellow-400)
  );
  --colors-yellow-focus-ring: light-dark(
    var(--color-yellow-400),
    var(--color-yellow-400)
  );
  --colors-lime-contrast: light-dark(black, black);
  --colors-lime-fg: light-dark(var(--color-lime-700), var(--color-lime-300));
  --colors-lime-muted: light-dark(var(--color-lime-50), var(--color-lime-950));
  --colors-lime-subtle: light-dark(
    var(--color-lime-100),
    var(--color-lime-900)
  );
  --colors-lime-emphasized: light-dark(
    var(--color-lime-200),
    var(--color-lime-800)
  );
  --colors-lime-solid: light-dark(var(--color-lime-400), var(--color-lime-400));
  --colors-lime-focus-ring: light-dark(
    var(--color-lime-400),
    var(--color-lime-400)
  );
  --colors-green-contrast: light-dark(white, white);
  --colors-green-fg: light-dark(var(--color-green-700), var(--color-green-300));
  --colors-green-muted: light-dark(
    var(--color-green-50),
    var(--color-green-950)
  );
  --colors-green-subtle: light-dark(
    var(--color-green-100),
    var(--color-green-900)
  );
  --colors-green-emphasized: light-dark(
    var(--color-green-200),
    var(--color-green-800)
  );
  --colors-green-solid: light-dark(
    var(--color-green-600),
    var(--color-green-600)
  );
  --colors-green-focus-ring: light-dark(
    var(--color-green-600),
    var(--color-green-600)
  );
  --colors-emerald-contrast: light-dark(white, white);
  --colors-emerald-fg: light-dark(
    var(--color-emerald-700),
    var(--color-emerald-300)
  );
  --colors-emerald-muted: light-dark(
    var(--color-emerald-50),
    var(--color-emerald-950)
  );
  --colors-emerald-subtle: light-dark(
    var(--color-emerald-100),
    var(--color-emerald-900)
  );
  --colors-emerald-emphasized: light-dark(
    var(--color-emerald-200),
    var(--color-emerald-800)
  );
  --colors-emerald-solid: light-dark(
    var(--color-emerald-600),
    var(--color-emerald-600)
  );
  --colors-emerald-focus-ring: light-dark(
    var(--color-emerald-600),
    var(--color-emerald-600)
  );
  --colors-teal-contrast: light-dark(white, white);
  --colors-teal-fg: light-dark(var(--color-teal-700), var(--color-teal-300));
  --colors-teal-muted: light-dark(var(--color-teal-50), var(--color-teal-950));
  --colors-teal-subtle: light-dark(
    var(--color-teal-100),
    var(--color-teal-900)
  );
  --colors-teal-emphasized: light-dark(
    var(--color-teal-200),
    var(--color-teal-800)
  );
  --colors-teal-solid: light-dark(var(--color-teal-600), var(--color-teal-600));
  --colors-teal-focus-ring: light-dark(
    var(--color-teal-600),
    var(--color-teal-600)
  );
  --colors-cyan-contrast: light-dark(white, white);
  --colors-cyan-fg: light-dark(var(--color-cyan-700), var(--color-cyan-300));
  --colors-cyan-muted: light-dark(var(--color-cyan-50), var(--color-cyan-950));
  --colors-cyan-subtle: light-dark(
    var(--color-cyan-100),
    var(--color-cyan-900)
  );
  --colors-cyan-emphasized: light-dark(
    var(--color-cyan-200),
    var(--color-cyan-800)
  );
  --colors-cyan-solid: light-dark(var(--color-cyan-600), var(--color-cyan-600));
  --colors-cyan-focus-ring: light-dark(
    var(--color-cyan-600),
    var(--color-cyan-600)
  );
  --colors-sky-contrast: light-dark(white, white);
  --colors-sky-fg: light-dark(var(--color-sky-700), var(--color-sky-300));
  --colors-sky-muted: light-dark(var(--color-sky-50), var(--color-sky-950));
  --colors-sky-subtle: light-dark(var(--color-sky-100), var(--color-sky-900));
  --colors-sky-emphasized: light-dark(
    var(--color-sky-200),
    var(--color-sky-800)
  );
  --colors-sky-solid: light-dark(var(--color-sky-600), var(--color-sky-600));
  --colors-sky-focus-ring: light-dark(
    var(--color-sky-600),
    var(--color-sky-600)
  );
  --colors-blue-contrast: light-dark(white, white);
  --colors-blue-fg: light-dark(var(--color-blue-700), var(--color-blue-300));
  --colors-blue-muted: light-dark(var(--color-blue-50), var(--color-blue-950));
  --colors-blue-subtle: light-dark(
    var(--color-blue-100),
    var(--color-blue-900)
  );
  --colors-blue-emphasized: light-dark(
    var(--color-blue-200),
    var(--color-blue-800)
  );
  --colors-blue-solid: light-dark(var(--color-blue-600), var(--color-blue-600));
  --colors-blue-focus-ring: light-dark(
    var(--color-blue-600),
    var(--color-blue-600)
  );
  --colors-indigo-contrast: light-dark(white, white);
  --colors-indigo-fg: light-dark(
    var(--color-indigo-700),
    var(--color-indigo-300)
  );
  --colors-indigo-muted: light-dark(
    var(--color-indigo-50),
    var(--color-indigo-950)
  );
  --colors-indigo-subtle: light-dark(
    var(--color-indigo-100),
    var(--color-indigo-900)
  );
  --colors-indigo-emphasized: light-dark(
    var(--color-indigo-200),
    var(--color-indigo-800)
  );
  --colors-indigo-solid: light-dark(
    var(--color-indigo-600),
    var(--color-indigo-600)
  );
  --colors-indigo-focus-ring: light-dark(
    var(--color-indigo-600),
    var(--color-indigo-600)
  );
  --colors-violet-contrast: light-dark(white, white);
  --colors-violet-fg: light-dark(
    var(--color-violet-700),
    var(--color-violet-300)
  );
  --colors-violet-muted: light-dark(
    var(--color-violet-50),
    var(--color-violet-950)
  );
  --colors-violet-subtle: light-dark(
    var(--color-violet-100),
    var(--color-violet-900)
  );
  --colors-violet-emphasized: light-dark(
    var(--color-violet-200),
    var(--color-violet-800)
  );
  --colors-violet-solid: light-dark(
    var(--color-violet-600),
    var(--color-violet-600)
  );
  --colors-violet-focus-ring: light-dark(
    var(--color-violet-600),
    var(--color-violet-600)
  );
  --colors-purple-contrast: light-dark(white, white);
  --colors-purple-fg: light-dark(
    var(--color-purple-700),
    var(--color-purple-300)
  );
  --colors-purple-muted: light-dark(
    var(--color-purple-50),
    var(--color-purple-950)
  );
  --colors-purple-subtle: light-dark(
    var(--color-purple-100),
    var(--color-purple-900)
  );
  --colors-purple-emphasized: light-dark(
    var(--color-purple-200),
    var(--color-purple-800)
  );
  --colors-purple-solid: light-dark(
    var(--color-purple-600),
    var(--color-purple-600)
  );
  --colors-purple-focus-ring: light-dark(
    var(--color-purple-600),
    var(--color-purple-600)
  );
  --colors-fuchsia-contrast: light-dark(white, white);
  --colors-fuchsia-fg: light-dark(
    var(--color-fuchsia-700),
    var(--color-fuchsia-300)
  );
  --colors-fuchsia-muted: light-dark(
    var(--color-fuchsia-50),
    var(--color-fuchsia-950)
  );
  --colors-fuchsia-subtle: light-dark(
    var(--color-fuchsia-100),
    var(--color-fuchsia-900)
  );
  --colors-fuchsia-emphasized: light-dark(
    var(--color-fuchsia-200),
    var(--color-fuchsia-800)
  );
  --colors-fuchsia-solid: light-dark(
    var(--color-fuchsia-600),
    var(--color-fuchsia-600)
  );
  --colors-fuchsia-focus-ring: light-dark(
    var(--color-fuchsia-600),
    var(--color-fuchsia-600)
  );
  --colors-pink-contrast: light-dark(white, white);
  --colors-pink-fg: light-dark(var(--color-pink-700), var(--color-pink-300));
  --colors-pink-muted: light-dark(var(--color-pink-50), var(--color-pink-950));
  --colors-pink-subtle: light-dark(
    var(--color-pink-100),
    var(--color-pink-900)
  );
  --colors-pink-emphasized: light-dark(
    var(--color-pink-200),
    var(--color-pink-800)
  );
  --colors-pink-solid: light-dark(var(--color-pink-600), var(--color-pink-600));
  --colors-pink-focus-ring: light-dark(
    var(--color-pink-600),
    var(--color-pink-600)
  );
  --colors-rose-contrast: light-dark(white, white);
  --colors-rose-fg: light-dark(var(--color-rose-700), var(--color-rose-300));
  --colors-rose-muted: light-dark(var(--color-rose-50), var(--color-rose-950));
  --colors-rose-subtle: light-dark(
    var(--color-rose-100),
    var(--color-rose-900)
  );
  --colors-rose-emphasized: light-dark(
    var(--color-rose-200),
    var(--color-rose-800)
  );
  --colors-rose-solid: light-dark(var(--color-rose-600), var(--color-rose-600));
  --colors-rose-focus-ring: light-dark(
    var(--color-rose-600),
    var(--color-rose-600)
  );

  /* semantic radii */
  --radii-l1: var(--radius-xs);
  --radii-l2: var(--radius-sm);
  --radii-l3: var(--radius-md);
  --radii-control-sm: calc(
    var(--radius-xs) * var(--scale-factor, 1) * var(--radius-control, 1)
  );
  --radii-control-md: calc(
    var(--radius-sm) * var(--scale-factor, 1) * var(--radius-control, 1)
  );
  --radii-control-lg: calc(
    var(--radius-md) * var(--scale-factor, 1) * var(--radius-control, 1)
  );
  --radii-panel-sm: calc(
    var(--radius-sm) * var(--scale-factor, 1) * var(--radius-panel, 1)
  );
  --radii-panel-md: calc(
    var(--radius-md) * var(--scale-factor, 1) * var(--radius-panel, 1)
  );
  --radii-panel-lg: calc(
    var(--radius-lg) * var(--scale-factor, 1) * var(--radius-panel, 1)
  );
  --radii-indicator-sm: calc(
    var(--radius-xs) * var(--scale-factor, 1) * var(--radius-indicator, 1)
  );
  --radii-indicator-md: calc(
    var(--radius-sm) * var(--scale-factor, 1) * var(--radius-indicator, 1)
  );
  --radii-indicator-lg: calc(
    var(--radius-md) * var(--scale-factor, 1) * var(--radius-indicator, 1)
  );

  /* semantic shadows */
  --shadows-xs:
    0px 1px 2px oklch(from var(--color-gray-900) l c h / 0.05),
    0px 0px 1px oklch(from var(--color-gray-900) l c h / 0.05);
  --shadows-sm:
    0px 2px 4px oklch(from var(--color-gray-900) l c h / 0.05),
    0px 0px 2px oklch(from var(--color-gray-900) l c h / 0.05);
  --shadows-md:
    0px 4px 8px oklch(from var(--color-gray-900) l c h / 0.05),
    0px 0px 3px oklch(from var(--color-gray-900) l c h / 0.05);
  --shadows-lg:
    0px 8px 16px oklch(from var(--color-gray-900) l c h / 0.05),
    0px 0px 4px oklch(from var(--color-gray-900) l c h / 0.05);
  --shadows-xl:
    0px 16px 24px oklch(from var(--color-gray-900) l c h / 0.05),
    0px 0px 5px oklch(from var(--color-gray-900) l c h / 0.05);
  --shadows-2xl:
    0px 24px 40px oklch(from var(--color-gray-900) l c h / 0.1),
    0px 0px 6px oklch(from var(--color-gray-900) l c h / 0.05);
  --shadows-inner: inset 0 2px 4px 0 oklch(0% 0 0 / 0.05);
  --shadows-inset: inset 0 1px 2px 0 oklch(0% 0 0 / 0.05);
  --shadows-overlay:
    0px 8px 16px oklch(from var(--color-gray-900) l c h / 0.05),
    0px 0px 4px oklch(from var(--color-gray-900) l c h / 0.05),
    0px 0px 1px oklch(from var(--color-gray-500) l c h / 0.8);
}

@custom-variant dark (&:where(.dark, .dark *));

@variant dark {
  :root {
    --shadows-xs:
      0px 1px 1px oklch(0% 0 0 / 0.3),
      0px 0px 1px inset oklch(from var(--color-gray-300) l c h / 0.05);
    --shadows-sm:
      0px 2px 4px oklch(0% 0 0 / 0.3),
      0px 0px 1px inset oklch(from var(--color-gray-300) l c h / 0.05);
    --shadows-md:
      0px 4px 8px oklch(0% 0 0 / 0.3),
      0px 0px 1px inset oklch(from var(--color-gray-300) l c h / 0.05);
    --shadows-lg:
      0px 8px 16px oklch(0% 0 0 / 0.3),
      0px 0px 1px inset oklch(from var(--color-gray-300) l c h / 0.05);
    --shadows-xl:
      0px 16px 24px oklch(0% 0 0 / 0.3),
      0px 0px 1px inset oklch(from var(--color-gray-300) l c h / 0.05);
    --shadows-2xl:
      0px 24px 40px oklch(0% 0 0 / 0.3),
      0px 0px 1px inset oklch(from var(--color-gray-300) l c h / 0.05);
    --shadows-inner: inset 0 2px 4px 0 black;
    --shadows-inset:
      inset 0 -1px 2px 0 oklch(from var(--color-gray-300) l c h / 0.04),
      inset 0 0 0 1px oklch(from var(--color-gray-300) l c h / 0.04);
    --shadows-overlay:
      0px 8px 16px oklch(0% 0 0 / 0.2),
      0px 0px 3px oklch(from var(--color-gray-900) l c h / 0.2),
      0px 0px 1px oklch(from var(--color-gray-100) l c h / 0.8);
  }
}
